<template>
	<div class="safety-box">
		<div class="list-box">
			<van-cell title="修改密码" is-link @click="isopen_pass = true"/>
			<van-cell title="注销账号" is-link @click="cancel_account"/>
		</div>
		<div class="popup-box">
			<van-popup
				v-model="isopen_pass"
				position="bottom"
				round
				closeable
				class="register-box"
			>
				<div class="registered-title">修改密码</div>
				<!-- 表单 -->
				<van-form @submit="modify">
					<van-field
						v-model="password.old_p"
						name="旧密码"
						label="旧密码"
						placeholder="旧密码"
						autocomplete="off"
						clearable
						:rules="[{ pattern, message: '旧密码格式错误' }]"
						:type="isDisplay_old ? 'text' : 'password'"
						:right-icon="isDisplay_old ? 'eye-o' : 'closed-eye'"
						@click-right-icon="toggleShowPass('isDisplay_old')"
					/>
					<van-field
						v-model="password.new_p"
						name="新密码"
						label="新密码"
						placeholder="新密码"
						autocomplete="off"
						clearable
						:rules="[{ pattern, message: '新密码格式错误' }]"
						:type="isDisplay_new ? 'text' : 'password'"
						:right-icon="isDisplay_new ? 'eye-o' : 'closed-eye'"
						@click-right-icon="toggleShowPass('isDisplay_new')"
					/>
					<div class="commit-btn">
						<van-button text="修改" round block type="info" native-type="submit" />
					</div>
				</van-form>
			</van-popup>
		</div>		
		
		<div class="drop_out">
			<van-button round block type="info" text="退出登录" @click="drop_out" />
		</div>
	</div>
</template>

<script>
	import { updatePassword,destroyAccount } from '@/api/user.js'
	export default {
		data() {
			return {
				// 密码正则表达式
				pattern: /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z]).*$/,
				// 修改密码数据对象
				password: {
					old_p: '',
					new_p: ''
				},
				// 是否显示修改密码弹出层
				isopen_pass: false,
				// 显示旧密码
				isDisplay_old: false,
				// 显示新密码
				isDisplay_new: false
			}
		},
		methods: {
			// 显示隐藏密码
			toggleShowPass(key) {
				this[key] = !this[key]
			},
			// 修改密码
			modify() {
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				if (this.password.old_p === this.password.new_p) return this.$toast('不能与旧密码相同')
				// 修改中
				this.$toast.loading({
					message: '修改中...',
					forbidClick: true
				})
				// 发起请求
				updatePassword({
					tokenString,
					oldPassword: this.password.old_p,
					password: this.password.new_p
				})
				.then(({data:res}) => {
					console.log('修改密码',res)
					if (res.code !== 'E001') return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.msg)
					setTimeout(() => {
						// 移除本地存储
						window.sessionStorage.removeItem('token')
						window.sessionStorage.removeItem('userInfo')
						window.sessionStorage.removeItem('userInfoAll')
						this.$router.replace({ name: "Login" })
					}, 800)
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 注销账号
			async cancel_account() {
				// 提示框
				const resultConfirm = await this.$dialog.confirm({
					title: "注销账号",
					message: "是否确认注销账号,注销无法恢复"
				}).catch(err => err)
				if (resultConfirm !== 'confirm') return this.$toast('取消注销')
				const tokenString = window.sessionStorage.getItem('token')
				if (!tokenString) return this.$router.push({ name: "Login" })
				// 注销中
				this.$toast.loading({
					message: '注销中...',
					forbidClick: true
				})
				// 发起请求
				destroyAccount({
					tokenString
				})
				.then(({data:res}) => {
					console.log('注销账户',res)
					if (res.code !== 'G001') return this.$toast.fail('请求异常,请重新尝试!')
					this.$toast.success(res.msg)
					setTimeout(() => {
						// 移除本地存储
						window.sessionStorage.removeItem('token')
						window.sessionStorage.removeItem('userInfo')
						window.sessionStorage.removeItem('userInfoAll')
						this.$router.replace({ name: 'Home' })
					}, 500)
				})
				.catch(err => {
					this.$toast.fail('请求失败,请重新尝试!')
				})
			},
			// 退出登录
			async drop_out() {
				// 提示框
				const resultConfirm = await this.$dialog.confirm({
					title: "退出登录",
					message: "确认退出当前账号"
				}).catch(err => err)
				if (resultConfirm !== 'confirm') return this.$toast('取消退出')
				setTimeout(() => {
					// 移除本地存储
					window.sessionStorage.removeItem('token')
					window.sessionStorage.removeItem('userInfo')
					window.sessionStorage.removeItem('userInfoAll')
					this.$router.replace({ name: 'Home' })
				}, 500)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.safety-box{
		.popup-box{
			.register-box{
				padding: 20px 0;
				.registered-title{
					font-size: 24px;
					font-weight: bold;
					padding: 0 15px;
					margin-bottom: 10px;
				}
				/deep/ .van-form {
					padding: 0 30px;
					box-sizing: border-box;
					.commit-btn{
						margin-top: 15px;
					}
				}
			}
		}
		.drop_out{
			position: fixed;
			width: 300px;
			left: 50%;
			bottom: 100px;
			transform: translateX(-50%);
		}
	}
</style>